<template>
	<view class="pages-user-login rel" v-if="isLoad">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" leftIcon="icon-left" title=" " color="#000"
			backgroundColor="none">
		</uni-nav-bar>
		<!-- #endif -->
		<image class="coach-bg abs" :src="`https://api.huixuananmm.com/admin/anmo/technician/coach-bg.png`"></image>
		<view class="rel" style="padding: 0 60rpx;">
			<!-- #ifdef H5 -->
			<view style="height:140rpx"></view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view style="height:228rpx"></view>
			<!-- #endif -->
			<view class="f-lg-title" style="color: #142C57;">重置密码</view>
			<view style="height:70rpx"></view>
			<view class="login-btn flex-center pl-lg pr-lg f-mini-title radius-16">
				<view class="text">手机号</view>
				<view class="flex-1 flex-center">
					<input v-model="registerForm.user_name" class="input flex-1 c-title" type="number" maxlength="11"
						placeholder="请输入手机号" placeholder-style="color:#C2CCD8" />
					<i @tap.stop="toClearName('registerForm')" class="iconfont icon-close"
						v-if="registerForm.user_name&&registerForm.user_name.length==11"></i>
				</view>
			</view>
			<view class="login-btn flex-center mt-md pl-lg pr-lg f-mini-title radius-16"
				v-if="configInfo.coach_account_phone_status">
				<view class="text">验证码</view>
				<view class="flex-1 flex-center">
					<input v-model="registerForm.phone_code" class="input flex-1 c-title" type="number" maxlength="11"
						placeholder="请输入验证码" placeholder-style="color:#C2CCD8" />
					<view @tap="submit('send')" class="f-mini-title" :style="{color:primaryColor}">
						{{authTime>0?`(${authTime}s)`:'获取验证码'}}
					</view>
				</view>
			</view>
			<view class="login-btn flex-center mt-md pl-lg pr-lg f-mini-title radius-16">
				<view class="text">密码</view>
				<view class="flex-1 flex-center">
					<input v-model="registerForm.pass_word" class="input flex-1 c-title"
						:class="[{'passwd-disc':!show_password && registerForm.pass_word.length>0}]" type="text"
						maxlength="18" placeholder="请输入密码" placeholder-style="color:#C2CCD8" />
					<i @click="show_password = !show_password" class="iconfont pl-sm cursor-pointer" :class="[
					              { iconxianshimima: show_password },
					              { iconyincangmima: !show_password }
					            ]" style="width: 40rpx"></i>
				</view>
			</view>
			<view class="login-btn flex-center mt-md pl-lg pr-lg f-mini-title radius-16">
				<view class="text">再次输入</view>
				<view class="flex-1 flex-center">
					<input v-model="registerForm.pass_again" class="input flex-1 c-title"
						:class="[{'passwd-disc':!show_again && registerForm.pass_again.length>0}]" type="text"
						maxlength="18" placeholder="请再次输入密码" placeholder-style="color:#C2CCD8" />
					<i @click="show_again = !show_again" class="iconfont pl-sm cursor-pointer" :class="[
					              { iconxianshimima: show_again },
					              { iconyincangmima: !show_again }
					            ]" style="width: 40rpx"></i>
				</view>
			</view>
			<view @tap.stop="submit('register')" class="login-btn flex-center f-title radius-10" style="margin: 40rpx 0"
				:style="{ background: primaryColor,color:'#fff' }">确定 </view>
		</view>
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	import siteInfo from '@/siteinfo.js';
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				show_password: false,
				show_again: false,
				isAgree: true,
				lockTap: false,
				authTime: 0,
				timer: null,
				registerForm: {
					user_name: '',
					phone_code: '',
					pass_word: '',
					pass_again: ''
				},
				registerRule: [{
					name: "user_name",
					checkType: "isMobile",
					errorMsg: "请输入手机号",
					regText: "手机号"
				}, {
					name: "phone_code",
					checkType: "isNotNull",
					errorMsg: "请输入短信验证码",
					regText: "短信验证码"
				}, {
					name: "pass_word",
					checkType: "isPassWord",
					errorMsg: "请输入密码",
					regText: "密码"
				}, {
					name: "pass_again",
					checkType: "isPassWord",
					errorMsg: "请再次输入密码",
					regText: "密码"
				}],
				sendRule: [{
					name: "user_name",
					checkType: "isMobile",
					errorMsg: "请输入手机号",
					regText: "手机号"
				}]
			}
		},
		async onLoad(options) {
			if (!this.configInfo.id) {
				await this.getConfigInfo()
			}
			let {
				account_info = {}
			} = this.coachInfo
			this.registerForm.user_name = account_info && account_info.id ? account_info.user_name : ''
			this.isLoad = true
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		methods: {
			...mapActions(['getConfigInfo', 'getCoachInfo']),
			...mapMutations(['updateConfigItem', 'updateUserItem', 'updateOrderItem']),
			toClearName(key) {
				let form = this.$util.deepCopy(this[key])
				form.user_name = ''
				this.$nextTick(() => {
					this[key] = form
				}, 0)
			},
			//表单验证
			validate(param, subType) {
				let validate = new this.$util.Validate();
				this[`${subType}Rule`].map(item => {
					let {
						name,
					} = item
					if (item.name === 'phone_code' && !this.configInfo.coach_account_phone_status) return
					validate.add(param[name], item)
				})
				let message = validate.start();
				return message;
			},
			async submit(subType) {
				let {
					authTime
				} = this
				if (authTime && subType == 'send') return
				let param = this.$util.deepCopy(subType == 'send' ? this.registerForm : this[`${subType}Form`])
				let msg = this.validate(param, subType);
				if (msg) {
					this.$util.showToast({
						title: msg
					})
					return
				}
				if (subType === 'register' && param.pass_again != param.pass_word) {
					this.$util.showToast({
						title: `两次密码输入不一致`
					})
					return
				}
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					let methodArr = {
						send: ['technician', 'coachAccountSendShortMsg'],
						register: ['technician', 'setCoachAccount']
					}
					let methodKey = methodArr[subType][0]
					let methodModel = methodArr[subType][1]
					if (subType == 'send') {
						param = {
							phone: param.user_name
						}
					}
					if (subType === 'register') {
						delete param.pass_again
					}
					await this.$api[methodKey][methodModel](param)
					let {
						account_info
					} = this.coachInfo
					this.$util.showToast({
						title: subType == 'send' ? '发送成功' : account_info && account_info.id ? '重置成功' : '设置成功'
					})
					this.$util.hideAll()
					this.lockTap = false
					if (subType == 'send') {
						this.registerForm.phone_code = ''
						let time = 60
						this.timer = setInterval(() => {
							if (time === 0) {
								clearInterval(this.timer)
								return
							}
							time--
							this.authTime = time
						}, 1000)
						return
					}
					this.timer && clearInterval(this.timer)
					setTimeout(() => {
						this.$util.goUrl({
							url: `/technician/pages/mine`,
							openType: `reLaunch`
						})
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}

			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
		height: 100%;
	}


	.pages-user-login {
		.coach-bg {
			top: 0;
			left: 0;
			width: 100%;
			height: 401rpx
		}

		.logo-img {
			width: 100rpx;
			height: 100rpx;
		}

		.line {
			left: 0;
			top: 60rpx;
			width: 60rpx;
			height: 7rpx;
			border-radius: 7rpx;
		}

		.other-sign {
			width: 400rpx;
			height: 60rpx;

			.f-mini-title {
				height: 60rpx;
				color: #142C57
			}
		}

		.b-1px-t::before {
			top: 30rpx;
			border-top: 1rpx solid #677792;
			color: #677792;
		}

		.sign-icon-btn {
			width: 76rpx;
			height: 76rpx;

			.iconfont {
				font-size: 40rpx;
			}
		}

		.sign-icon-btn.abs {
			opacity: 0.1;
		}


		.login-btn {
			width: 630rpx;
			height: 110rpx;
			color: #142C57;
			background: #F6F7FB;

			.text {
				width: 140rpx
			}

			.input {
				height: 110rpx;
			}

			.iconxianshimima {
				font-size: 30rpx;
			}

			.iconyincangmima {
				font-size: 16rpx;
			}

		}
	}
</style>